<template>
  <div class="serachBox" style="background: #fafafa">
    <div class="serachCon">
      <div class="iconfont" @click="btn"></div>
      <input
        class="input"
        v-model="searchValue"
        :placeholder="data.placeholder"
        type="text"
        autofocus="autofocus"
      />
    </div>
    <button @click="btn" form="form">搜索</button>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      searchValue: '',
    }
  },
  methods: {},
  destroyed() {
    this.searchValue = ''
  },
}
</script>
<style lang="scss" scoped>
// .box {
.serachBox {
  width: 100%;
  display: flex;
  padding: 20rpx 30rpx;
  // position: fixed;
  // z-index: 999999;
  .serachCon {
    // border: 1px solid;
    width: 541rpx;
    height: 60rpx;
    border-radius: 29rpx;
    background-color: #f4f4f4;
    padding: 0 31rpx;
    display: flex;
    align-items: center;
    .iconfont {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
      background: url('../assets/common-search.png') no-repeat;
      background-size: 100% 100%;
    }
    .input {
      height: 25rpx;
      // border: 1px solid;
      width: 100%;
      font-size: 26rpx;
      color: rgba(153, 153, 153, 1);
    }
  }
  button {
    width: 137rpx;
    height: 60rpx;
    border-radius: 28rpx;
    background-color: #f4f4f4;
    // border: 1px solid;
    margin-left: 12rpx;
    // border: none;
    font-size: 26rpx;
    line-height: 60rpx;
    color: rgba(51, 51, 51, 1);
    &:after {
      border: none;
    }
  }
  uni-button:after {
    border: none;
  }
}

// }
</style>
